<html>
<head>
    <title>智能图书平台</title>
<style>
    * {
        box-sizing: border-box;
        font-family: Arial, sans-serif;
    }

    body {
    	   background-size: cover;
        background-color: #f0f2f5;
        margin: 0;
        padding: 0;
    }

    .book-container {
    	   background-size: cover;
        max-width: 1200px;
        margin: 5% auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    a {
        text-decoration: none;
        color: #007bff;
    }

    a:hover {
        text-decoration: underline;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
    }

    th {
        background-color: #f0f2f5;
    }

    button {
        padding: 5px 10px;
        background-color: #dc3545;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    button:hover {
        background-color: #c82333;
    }

    form {
        display: inline;
    }

    .edit-btn {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin-right: 10px;
    }

    .edit-btn:hover {
        background-color: #0056b3;
    }

    .add-book {
        display: inline-block;
        padding: 5px 10px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 20px;
    }
.edit-btn img,
    .delete-form img {
        width: 20px; /* 设置图片宽度 */
        height: 20px; /* 设置图片高度 */
        margin-right: 5px;
        vertical-align: middle;
    }

    .add-book:hover {
        background-color: #218838;
    }
    .admin-info {
        text-align: right;
    }
	.center-text {
            position: fixed;
            bottom: 15px; /* 根据需要调整 */
    	   	 left: 50%;
    	 	 transform: translate(-50%, 50%);
   	 	 color: black;
    	 	 font-size: 15px;
	  }
</style>
</head>
<body>
    <div class="book-container">
        <div class="admin-info">
            <button onclick="window.location.href='{{ url_for('index2') }}'">返回</button>
        </div>
        <h1>图书管理平台(管理员操作界面)</h1>
        <table>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>状态</th>
                    <th>用户</th>
                    <th>电话</th>
                    <th>借阅时间</th>
                    <th>操作</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>{{ book.title }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.state }}</td>
                        <td>{{ book.state_user }}</td>
                        <td>{{ book.state_user }}</td>
                        <td>{{ book.user_phone }}</td>
                        <td>{{ book.state_time}}</td>
                        <td>
                    <button type="button" class="edit-btn" onclick="window.location.href='/edit/{{book.id}}'">
                       <img src="/static/006.jpg" alt="Edit">
                    </button>
               <form action="{{ url_for('delete_book', id=book.id) }}" method="post" class="delete-form">
                   <button type="submit">
               <img src="/static/007.jpg" alt="Delete">
             </button>
</form>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
    <div class="center-text">图书管理系统&nbsp&nbsp&nbsp&nbsp<a href="https://www.scvtc.edu.cn/index.htm" target="_blank" style="color: black; text-decoration: none; border-bottom: 1px solid black;">四川职业技术学院</a>&nbsp&nbsp&nbsp&nbsp黄俊杰团队产品</div>
</body>
</html>